<template>
  <page-wrapper dense contentFullHeight fixedHeight contentClass="flex">
    <BasicTable @register="registerTable">
      <template #form-formHeader>
        <a-button class="mr-4" type="primary"> 返回 </a-button>
      </template>
      <template #form-formFooter>
        <div style="text-align: right">
          <a-button type="primary" @click="fnAddDevice">添加</a-button>
        </div>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <a-button type="link" @click="fnAddDevice()"> 编辑 </a-button>
          <a-button type="link" @click="handleDelete(record)"> 删除 </a-button>
        </template>
      </template>
    </BasicTable>
  </page-wrapper>
</template>

<script lang="ts" setup>
  import { BasicTable, useTable } from '@/components/Table';
  import { PageWrapper } from '@/components/Page';
  import { useMessage } from '@/hooks/web/useMessage';

  const { createMessage, createConfirm } = useMessage();

  const [registerTable, { reload }] = useTable({
    title: '',
    rowKey: 'id',
    // api: 'apiGetPhoneDeviceList',
    columns: [],
    formConfig: {
      labelWidth: 80,
      schemas: [],
      autoSubmitOnEnter: true,
      showAdvancedButton: false,
      actionColOptions: {
        style: { width: '150px', marginLeft: '20px' },
      },
    },
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
      fixed: undefined,
    },
    resizeHeightOffset: 20,
    showIndexColumn: false,
    useSearchForm: true,
    showTableSetting: false,
    bordered: true,
  });

  function handleDelete(record) {
    createConfirm({
      iconType: 'warning',
      title: '删除设备',
      content: `您确定要删除 ${record.model_name} 吗？`,
      onOk: async () => {
        // await apiDelPhoneDevice({ id: record.id });
        createMessage.success(`删除成功`);
        reload();
      },
    });
  }

  function fnAddDevice() {}
</script>
